<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ali双11</title>
    <script>
    (function(){
        console.log('立即执行函数')
        function calc(){
            const w = document.documentElement.clientWidth ;
            console.log(w)
            document.documentElement.style.frontSizeze = 75 * (w / 750) + 'px';
        }
        calc()
        // 监听窗口的尺寸变化 ,重新计算
        window.onresize = function(){
            console.log('窗口变化了')
            calc()
        }
    })() 
    // 利用<script>的阻塞 , 来动态设置HTML front-size样式
    // 立即执行函数
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
   <div style="width : 10rem ; height :2rem ; background-color: red;"></div>
   <!--拼接在一起 , 标签和标签之间 有空格-->
   <div style="width : 5rem ; height :2rem ; background-color: green;display: inline-block;"></div><div style="width : 5rem ; height :2rem ; background-color: blue;display: inline-block;"></div>
   <div style =" font-size : 0">
    <!-- css有继承的特性 , 父元素和子元素 , 父元素有font-size , 子元素有font-size , 子元素会继承父元素的font-size -->
    <div style="width : 5rem ; height :2rem ; background-color: green;display: inline-block; font-size:20px">111</div>
    <div style="width : 5rem ; height :2rem ; background-color: blue;display: inline-block;">222</div>
   </div>
</body>
</html>